<template>
  <div style="text-align: center;">
    <div>
      <div class="lable">
        <span>语种：</span>
        <div v-for="area in areas" :key="area.index">
          <el-radio class="value" v-model="SearchArea" :label="area.value" @input="getArea()">{{area.name}}</el-radio>
        </div>
      </div>

      <div class="lable">
        <span>分类：</span>
        <div v-for="type in types" :key="type.index">
          <el-radio class="value" v-model="SearchType" :label="type.value" @input="getType()">{{type.name}}</el-radio>
        </div>

      </div>

      <div class="lable">
        <span>筛选：</span>
        <div v-for="initial in initials" :key="initial.index">
          <el-radio class="value" v-model="SearchInitials" :label="initial.value"
            @input="getInitial()">{{initial.name}}</el-radio>
        </div>
      </div>
    </div>
    <div>
      <el-row :gutter="16">
        <el-col :md="4" :xs="24" v-for="artist in artists" :key="artist.index">
          <div class="box">
            <img class="img" :src="artist.picUrl" @click="toArtist(artist.id)">
            <p><i class="el-icon-view"> {{(artist.fansCount/10000).toFixed(1)}} 万</i></p>
          </div>
          <span>{{artist.name}}</span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import musicApi from '../musicApi/apis/songs'
  export default {
    name: "artist",
    data() {
      return {
        types: [
          { name: '全部', value: -1 },
          { name: '男歌手', value: 1 },
          { name: '女歌手', value: 2 },
          { name: '乐队', value: 3 }
        ],
        areas: [
          { name: '全部', value: -1 },
          { name: '华语', value: 7 },
          { name: '欧美', value: 96 },
          { name: '日本', value: 8 },
          { name: '韩国', value: 16 },
          { name: '其他', value: 0 }
        ],
        initials: [
          { name: '热门', value: -1 },
          { name: '#', value: 0 }
        ],
        SearchType: -1,
        SearchArea: -1,
        SearchInitials: -1,
        artists: []
      }
    },
    methods: {
      //获取26个字母
      getInitials() {
        for (var i = 0; i < 26; i++) {
          let initial = String.fromCharCode((65 + i))
          let obj = {}
          obj.name = initial
          obj.value = initial
          this.initials.push(obj)
        }
      },
      //获取语种
      getArea() {
        musicApi.getArtistsList(this.SearchType, this.SearchArea, this.SearchInitials).then(res => {
          this.artists = res.data.artists
        })
      },
      //获取分类
      getType() {
        musicApi.getArtistsList(this.SearchType, this.SearchArea, this.SearchInitials).then(res => {
          this.artists = res.data.artists
        })
      },
      //获取筛选字母
      getInitial() {
        musicApi.getArtistsList(this.SearchType, this.SearchArea, this.SearchInitials).then(res => {
          this.artists = res.data.artists
        })
      },
      //跳转歌手详情
      toArtist(id) {
        this.$router.push({ path: '/artist', query: { id: id } })
      }

    },
    mounted() {
      this.getInitials();
      this.getType();
    }
  }
</script>

<style scoped>
  .lable {
    display: flex;
    margin-top: 20px;
  }

  .value {
    margin-left: 20px;
  }

  .box {
    position: relative;
  }

  .box p {
    position: absolute;
    left: 150px;
    top: 10px;
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 97%, rgba(0, 0, 0, 0.5) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 97%, rgba(0, 0, 0, 0.5) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 97%, rgba(0, 0, 0, 0.5) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
    color: #ffcc00;
  }

  .img {
    width: 220px;
    height: 200px;
    margin-top: 20px;
    cursor: pointer;
    border: 2px solid #CD7F32;
  }
</style>